<template>
	<div class="writeform">
		<form class="form-cont">
			<div class="form-title clearFix">
				<p>基本信息</p>
			</div>
			<div class="form-basetop clearFix">
				<div class="form-half">
					<p>汇报人：</p>
					<span>{{empName}}</span>
				</div>
				<div class="form-half">
					<p>部门：</p>
					<span>{{depName}}</span>
				</div>
			</div>
			<div class="form-baseinput">			    
				 <datetime v-if="!stateX" title="事发日期：" v-model="list.missTime" tips="事发日期"  value-text-align="left"></datetime>
				 <x-input v-if="stateX" title="事发日期：" tips="事发日期" v-model="list.missTime"  readonly></x-input>
					<!--<div class="form-group formline">
						 <label>事发日期：</label>
						<input type="date" name="missTime" required v-model="list.missTime" tips="事发日期" class="form-control" placeholder="事发日期">
						
						
					</div>-->
					<!-- <div class="form-group formline">
						<label>事发类型：</label>
						<select class="form-control" v-model="list.missType">
							<option v-for="types in siteType" v-bind:value="types.typeKey">
								{{types.typeName}}
							</option>
						</select>
					
						 
					</div> -->
					<selector title="事发类型 :" placeholder="Placeholder" :options="siteTypeObj" v-model="list.missType"  ></selector>
					<!--<div class="form-group formline">
						<label>事发地点：</label>
						<select class="form-control" v-model="list.missSite">
							<option v-for="sites in siteMap" v-bind:value="sites.typeKey">
								{{sites.typeName}}
							</option>
						</select>
					</div> -->
					<selector title="事发地点 :" placeholder="Placeholder" :options="siteMapObj" v-model="list.missSite"  ></selector>
			</div>

			<div class="form-textarea">
				<div class="form-title clearFix">
					<p>事件描述</p>
				</div>
				<div class="form-group">
					<textarea name="missDescribe" rows="3" required tips="事件描述" v-model="list.missDescribe" class="form-control" placeholder="时间、地点、发生了什么事、有何影响(必填)"></textarea>
				</div>
				<div class="form-title clearFix">
					<p>当时采取的措施</p>
				</div>
				<div class="form-group">
					<textarea name="missStep" rows="3" v-model="list.missStep" required tips="当时采取的措施" class="form-control" placeholder="当时采取的措施(必填)"></textarea>
				</div>
				<div class="form-title clearFix">
					<p>值得分享的经验与教训</p>
				</div>
				<div class="form-group">
					<textarea name="missShare" rows="3" v-model="list.missShare" required tips="经验与教训" class="form-control" placeholder="值得分享的经验与教训(必填)"></textarea>
				</div>
			</div>

			<div class="form-title clearFix">
				<p>相关照片</p>
			</div>
			<div class="form-group uploadimage" id="uploadimage">
				<ul>
					<li v-for="(img,index) in imgs">
						<img :src="img" @click="previewImg(img)"/>
						<i class="ion ion-ios-close" v-if="$route.query.state != 1 && $route.query.state != 2" @click.stop.prevent="delImg(img,index)"></i>
					</li>
					<li>
						<a class="companypic" id="chooseImages" @click="getSig()" v-if="$route.query.state != 1 && $route.query.state != 2 && imgs.length < 6">
			        		<i class="ion ion-android-add fontcompany"></i>
			        		<!-- <span class="bluecolor block">点击上传照片</span> -->
			        	</a>
					</li>	
				</ul>
				
	        	
       		</div>
       		<div class="savebtn" v-if="$route.query.state != 1 && $route.query.state != 2">
	       		<button type="button" class="saveonly" @click="savenm(0)">保存</button>
	       		<button type="button" class="" @click="savenm(1)">保存并提交</button>
	   		</div>
		</form>
		<loading v-if="loadShow"></loading>
		<toast v-if="toastShow" :message="tipMessage"></toast>

		<transition name="slide">
	      <tips v-show="tipsShow" :tips="tipsMessage"></tips>
	    </transition>
	</div>
</template>

<script type="text/javascript">
	import {Datetime,Selector,XInput} from 'vux'

	import wx from 'weixin-js-sdk'

	import jssdk from '../../assets/js/jssdk/wxJSSDK'

	import safeUrl from '../../assets/js/insterface'

	import getQuery from '../../assets/js/get_querys'

	import vaild from '../../assets/js/vaild_form'

	import http from '../../assets/js/http_mixin'

	export default {
		data () {
			return {
				isSubmit:true,// 防止保存和提交短事件内触发多次
				idx2:0,
				empName:'',
				depName:'',
				tipMessage:'',
				list:{
					id:'',
					// empNo:this.$route.query.empNo,
					empNo:'',
					depId:'',
					missTime:'',
					missType:'',
					typeName:'',
					missSite:'',
					missDescribe:'',
					missStep:'',
					missShare:'',
					missImg:'',
					state:0
				},

				siteMap:[],
				siteType:[],
				siteTypeObj: [],
				siteMapObj: [],

				imgs:[],
				missImgs:[],

				idx:0,
				stateX:true,
			}
		},
		
		components: {
			Datetime,
			Selector,
			XInput
		},
		mixins:[jssdk ,getQuery, http, vaild],
		mounted() {
			document.title="Near Miss";
			this.list.empNo = this.$route.query.empNo;
			this.selectData();
			this.init();
			this.stateX = this.$route.query.state ? true : false;
			console.log(this.stateX) 
		},
		methods: {
			selectData(callback) {
				// debugger;
				// if(!this.$route.query.state){
					this.$http.post(safeUrl.nmSelectData,{empNo:this.list.empNo},{emulateJSON: true})
					.then((response) =>{
						if(response.data.evo){
							const dataevo = response.data.evo;
							const datamap = response.data.map;

							const d = new Date();
							var months = d.getMonth() + 1;
							var days =  d.getDate();
							if(months < 10){
								months = '0' + months;
							}
							if(days < 10){
								days = '0' + days;
							}
							this.list.missTime = d.getFullYear()+"-"+months+"-"+days;
							// const d = new Date();
							// this.list.missTime = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
							this.list.depId = dataevo.depId;	


							this.empName = dataevo.employeeName;
							this.depName = dataevo.depName;

							this.siteMap = datamap.siteMap;
							this.list.missSite = datamap.siteMap[0].typeKey;
							// debugger;
							this.siteType = datamap.siteType;
							this.list.missType = datamap.siteType[0].typeKey;
							this.getSiteTypeObj()
							this.getSiteMapObj()
							this.enterData();
						}
						console.log(response.data)
					})
					.then(function(response){
						console.log(response)
					})
				// }
			},
			enterData(){
				// debugger;
				if(this.$route.query.state){
					this.getData();
					// debugger;
					//console.log(this.$refs.happenDate);
					var form = document.forms[0]; 
					for ( var i = 0; i < form.length; i++) { 
						var element = form.elements[i]; 
						element.disabled = true; 
					} 
				}else if(this.$route.query.state == 0){
					this.getData();
				}
			},
			getData(){
				this.$http.post(safeUrl.nmDetail,{nId:this.$route.query.id},{emulateJSON: true})
				.then((response) =>{
					// debugger;
					this.empName = response.data.empName;
					this.depName = response.data.depName;
					this.list.id = response.data.id;
					this.list.depId = response.data.depId;
					this.list.missTime = response.data.missTime;
					this.list.missType = response.data.missType;
					this.list.typeName = response.data.typeName;
					this.list.missSite = response.data.missSite;
					this.list.siteName = response.data.siteName;
					this.list.missDescribe = response.data.missDescribe;
					this.list.missStep = response.data.missStep;
					this.list.missShare = response.data.missShare;
					if(response.data.missImg != "" && response.data.missImg != null){
						const imgArr = response.data.missImg.split(",")
						for(var j=0; j<imgArr.length; j++){
							this.missImgs.push(imgArr[j]);
						}
						this.imgs = imgArr;
					}
					console.log(response.data)
				})
				.then(function(response){
					console.log(response)
				})
			},
			getSig() {
				var vue = this;
				var chooseImageID = [];
				var imageId = document.getElementById('chooseImages');
				this.imageApi({
					chooseImage:{
						count:6 - vue.imgs.length,
						success:function(res){
							chooseImageID = res.localIds;
							if(chooseImageID[0].toString().indexOf("wxLocalResource") != -1){
								vue.getLocalImg(chooseImageID);    
							}else{
								for(var i=0; i<chooseImageID.length; i++){
									vue.imgs.push(chooseImageID[i]);
								}
							} 							
							// vue.imglength = vue.imgs.length;
							vue.syncUpload(chooseImageID);
							console.log("gongsi------------" + chooseImageID);
						}
					}
				})
			},
			getLocalImg(eve){
		        var _this = this;
		        _this.imageApi({
					getLocalImgData:{
						localId: eve[_this.idx2].toString(),
						success: function (res) {
							_this.idx2++;
							_this.imgs.push(res.localData.toString());
							if (_this.idx2 < eve.length) {
								_this.getLocalImg(eve);   
							} else {
								_this.idx2 = 0;
							}
						}
					}
		        });    
		    },
			previewImg(img) {
				var vue = this;
				this.imageApi({
					previewImage:{
						current:img,
						urls:vue.imgs
					}
				})
			},
			syncUpload (localIds){
				var vue = this;
				this.imageApi({
					uploadImage:{
						localId:localIds[vue.idx].toString(),
						success:function(res){
							vue.idx++;
							vue.missImgs.push(res.serverId);
							if(vue.idx<localIds.length){
								vue.syncUpload(localIds);
							}else{
								vue.idx = 0;
							}
						}
					}
				})
			},
			savenm(e) {
				if(e == "1"){
					var oInput = document.forms[0].elements;
			        if (!this.vaildForm(oInput)) {
			          return false
			        }
		        }
				var vue = this;
				this.list.state = e;
				this.list.missImg = this.missImgs.join(",");
				//保存操作
				if(this.isSubmit){
					this.isSubmit = false;
					setTimeout(function (){
						this.isSubmit= true;
					},2000);
					this.getInfo({
						url:safeUrl.nmSendData,
						param:this.list,
						success:function(response){
							vue.toastShow = true;
							vue.tipMessage = response.data.msg;
							setTimeout(function(){
								vue.toastShow = false;
								window.history.go(-1);
							},1500);
							console.log(response.data);
						},
						fail:function(response){

						}
					})
				}
			},
			delImg(img,i) {
				this.missImgs.splice(i,1);
				this.imgs.splice(i,1);
			},
			getSiteTypeObj() {
				console.log(this.siteType);

				for(let i =0; i<this.siteType.length;i++){
					let obj = {};
					obj.value = this.siteType[i].typeName
					obj.key = this.siteType[i].typeKey
					this.siteTypeObj.push(obj)
					
				}
				console.log(this.siteTypeObj);
			},
			getSiteMapObj() {
				console.log(this.siteMap)
				for(let i =0; i<this.siteMap.length;i++){
					let obj = {};
					obj.value = this.siteMap[i].typeName
					obj.key = this.siteMap[i].typeKey
					this.siteMapObj.push(obj)
					
				}
			}
		}

	}
</script>
